<template>
  <div id="swipercom">
    <div class="swiper-container" id="swiperIndex">
      <div class="swiper-wrapper">
        <div class="swiper-slide w-100" v-for="(item, i) in imgs" :key="i">
          <img :src="item.pic" alt="" />
        </div>
      </div>
      <!-- 换页器 -->
      <div class="swiper-pagination text-right px-3 pb-1"></div>
    </div>
  </div>
</template>

<script>
import "swiper/css/swiper.css"; //引入swiper样式
import Swiper from "swiper"; //引入swiper
export default {
  name: "Swiper",
  data() {
    return {
      imgs: [
        { pic: require("../assets/images/swiper1.jpeg") },
        { pic: require("../assets/images/swiper2.jpeg") },
        { pic: require("../assets/images/swiper3.jpeg") },
      ],
    };
  },
  mounted() {
    var mySwiper = new Swiper("#swiperIndex", {
      //配置分页器内容

      loop: true, // 循环模式选项
      pagination: {
        el: ".swiper-pagination", //换页器与哪个标签关联
        clickable: true, //分页器是否可以点击
      },
    });
  },
};
</script>

<style lang="scss">
@import "../assets/scss/variables";
#swipercom {
  #swiperIndex.swiper-container {
    .swiper-slide img {
      width: 100%;
    }
    .swiper-pagination-bullet {
      opacity: 1;
      border-radius: 2px;
      background-color: map-get($colors, "white");

      &.swiper-pagination-bullet-active {
        background-color: map-get($colors, "info");
      }
    }
  }
}
</style>
